<meta charset="utf-8">
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>简单的评分</title>
<style>
.row{
margin-top: 30px;
border: 1px solid #eee;
padding-top: 12px;
padding-bottom: 12px;
position: relative;
}
.col{
display: inline-block;
bottom: 0;
width: 9%;
}

</style>
<div id="app">
	<div class="row" v-for="(group,j) in groups">
		<div class="col">总分：{{group.reduce((t,c)=>t+c.score,0)}}</div>
			
		<div class="col" v-for="(student,i) in group">
		<div>{{student.score}}分</div>
		<div :style="{width:'30px',height:5+student.score+'px',
		 background:'SandyBrown'}"></div>
		<button @click="add(j,i)">{{student.name}}</button>
		</div>
	</div>
</div>

</head>
<body>
<script>
new Vue({
el:"#app",
data:{
	groups:[[
	{name:"张三",score:0},
	{name:"李四",score:0},
	{name:"王五",score:0},
	],
	
	[
	{name:"张三",score:0},
	{name:"李四",score:0},
	{name:"王五",score:0},
	],
	
	[
	{name:"张三",score:0},
	{name:"李四",score:0},
	{name:"王五",score:0},
	]]
	

},

methods:{
	add:function(j,i){
		this.groups[j][i].score+=3
		
	}
},
})
</script>
</body>
</html>
